<template>
    <el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize"
        :close-on-click-modal="false">
        <template #header="{ titleId, titleClass }">
            <div class="zs-drawer-header" :id="titleId" :class="titleClass">
                <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
                <div class="zs-title zs-text-black">配置标签</div>
            </div>
        </template>
        <template #default>
            <el-container class="zs-drawer-container">
                <el-scrollbar class="zs-drawer-content hs-flex">
                    <!-- 必要时才定义id 请务必确保id唯一 遵从命名规范 -->
                    <div class="zs-align-center zs-space-bottom" id="label-config-drawer-card-01">
                        <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
                        <div class="zs-title">基本信息</div>
                    </div>

                    <div class="zs-card zs-space-bottom">
                        <el-form :label-position="labelPosition" label-width="140px" ref="infoFormRef"
                            :model="form.data" :rules="form.rules">
                            <el-form-item label="是否监控：" prop="isMonitored">
                                <el-radio-group v-model="form.data.isMonitored">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="配置说明：" prop="description">
                                <el-input v-model="form.data.description" type="textarea" :autosize="{ minRows: 2 }"
                                    :maxlength="curTextareaLength" show-word-limit :disabled="isReadOnly" />
                            </el-form-item>
                        </el-form>
                    </div>
                </el-scrollbar>
                <hsDocWrapper :nodeList="curNodeList"></hsDocWrapper>
            </el-container>
        </template>
        <!-- 详情抽屉 footer可以不要 根据实际需求定 -->
        <template #footer>
            <div>
                <el-button class="zs-btn-md zs-btn-plain" @click="cancelClick()">取消</el-button>
                <el-button class="zs-btn-md zs-btn-primary" @click="confirmClick(ruleFormRef)">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import detailApi from '@/api/Manage/Business/detailPages'
// import DocWrapper from '@/components/DocWrapper.vue'
// import { getAuthNumApi, getApiDTOListApi, addOrUpdateOpenCenterUserApi, getViewForUpdateOpenCenterUserDTOApi } from '@/api/OpenApi'
// import { queryPorjectDownApi } from '@/api/ProjectMapping'
let store = useStore()
const curNodeList = ref([
    { name: '基本信息', id: 'label-config-drawer-card-01' },
])
const curDrawerSize = ref(store.state.uiDrawerSize)
const curTextareaLength = ref(store.state.uiTextareaLength)
const labelPosition = ref('right')
const infoFormRef = ref();
const props = defineProps({
    isShow: { type: Boolean, default: false },
    selectItem: Object,
    isReadOnly: { type: Boolean, default: false },
})
const emit = defineEmits(['close'])

let form = reactive({
    data: {},
    rules: {
        isMonitored: { required: true, message: '请选择是否监控', trigger: 'blur' },
        description: { required: true, message: '请填写配置说明', trigger: 'blur' },
    }
})
const isShowDrawer = ref(props.isShow)

// 获取详情
const getDetail = () => {
    detailApi.getLabelApi(props.selectItem.contractscode).then((res) => {
        if (res.data.code == 200) {
            form.data = res.data.data
        }
    })
}
getDetail()

const confirmClick = () => {
    let formList = [infoFormRef]
    let resultArr = [];
    let validate = (form) => {
        let result = new Promise((resolve, reject) => {
            form.value.validate(valid => {
                if (valid) {
                    resolve()
                } else {
                    reject()
                }
            })
        })
        resultArr.push(result)
    }
    formList.forEach(item => {
        validate(item)
    })
    Promise.all(resultArr).then(() => {
        saveRule()
    })
}

const saveRule = () => {
    detailApi.brandMonitoringeditLabelApi(form.data).then((res) => {
        if (res.data.code == 200) {
            cancelClick()
        }
    })
}

// 关闭drawer
const handleClose = (done) => {
    emit('close', { isShow: false })
    infoFormRef.value.resetFields()
    done()
}

function cancelClick() {
    isShowDrawer.value = false
    emit('close', { isShow: false })
}

const init = () => {

}
init()

</script>

<style scoped lang="scss"></style>
